Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a button to create a new note to the dashboard #873

Merged

Conversation

salixor
Copy link
Contributor

@salixor salixor commented Jul 9, 2022

Closes #869 by adding a new button :

No notes Some notes A lot of notes
image image image

For reference, next to the Tasks app widget :

image

salixor added 3 commits July 9, 2022 23:06
Signed-off-by: Kévin Cocchi <kevin.cocchi@gmail.com>
Signed-off-by: Kévin Cocchi <kevin.cocchi@gmail.com>
Signed-off-by: Kévin Cocchi <kevin.cocchi@gmail.com>
Copy link
Member

@korelstar korelstar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your contribution, @salixor ! This is a good solution. However, I have some questions to the code changes (see inline comments).

src/App.vue Outdated
Comment on lines 233 to 230
this.routeToNote(note.id, { new: null })
this.routeToNote(note.id)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you remove the parameter new? It has the purpose, that the note's title is automatically generated from the first line of the note.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad, I hadn't seen it was used somewhere else ! I'll remove these changes

Comment on lines 86 to 89
buttonsFooterStyle() {
const marginTop = this.items.length > 0 ? 20 + (this.displayedItemsCount - this.items.length) * 60 : 10
return { marginTop: `${marginTop}px` }
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks quite complicated. You are comparing to the tasks app, but I don't see such a complicated calculation, there. Do we really need this or can we copy the styling from the tasks app?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The main motive behind this implementation was to have the button stay at the bottom of the widget, rather than below the content. In Tasks, the button stays below the content :

Tasks Widget Notes Widget

I'd argue having the button at a fixed height is better, but we could as well simplify the logic and have the button stay below the content.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, then we should do absolute positioning from the bottom. I will provide a change suggestion in a minute.

salixor added 2 commits July 11, 2022 13:44
Signed-off-by: Kévin Cocchi <kevin.cocchi@gmail.com>
Signed-off-by: Kévin Cocchi <kevin.cocchi@gmail.com>
Copy link
Member

@korelstar korelstar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest to do absolute positioning instead of calculating the position from top. This also obsoletes displayedItemsCount. What do you think?

src/components/Dashboard.vue Outdated Show resolved Hide resolved
src/components/Dashboard.vue Outdated Show resolved Hide resolved
src/components/Dashboard.vue Show resolved Hide resolved
src/components/Dashboard.vue Show resolved Hide resolved
Comment on lines 86 to 89
buttonsFooterStyle() {
const marginTop = this.items.length > 0 ? 20 + (this.displayedItemsCount - this.items.length) * 60 : 10
return { marginTop: `${marginTop}px` }
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, then we should do absolute positioning from the bottom. I will provide a change suggestion in a minute.

Signed-off-by: Kévin Cocchi <kevin.cocchi@gmail.com>
@salixor
Copy link
Contributor Author

salixor commented Jul 11, 2022

I suggest to do absolute positioning instead of calculating the position from top. This also obsoletes displayedItemsCount. What do you think?

I had tried it, but I didn't reach a satisfying solution. I'm now realizing I simply had put the relative attribute on the wrong div 🤦

Thanks for the suggestion, it's definitely cleaner this way 👍

I also replaced the translation string to prevent the need of translating to every language, since there's already a string that does the job well

@korelstar korelstar added this to the 4.5.0 milestone Jul 12, 2022
Copy link
Member

@korelstar korelstar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Looks good and sorry for the delay

@korelstar korelstar merged commit dccf0b3 into nextcloud:master Aug 2, 2022
@korelstar korelstar added the feature: dashboard Related to Nextcloud dashboard label Aug 2, 2022
@salixor salixor deleted the feature/create-note-button-dashboard branch August 20, 2022 13:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature: dashboard Related to Nextcloud dashboard
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a "New note" button to the dashboard widget
2 participants